<template>
  <grid-layout :layout="layout">
    <template #left>
      <basic-info :data="details" />
    </template>
    <template #right>
      <people-info-tabs v-if="show" :data="details" v-bind="$attrs" @updateDetails="getDataAsync" />
    </template>
  </grid-layout>
</template>

<script>
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import { peopleDetails } from '@gis/lib/api/index.js';
import BasicInfo from './components/basic-info.vue';
import PeopleInfoTabs from './components/people-info-tabs.vue';

export default {
  name: 'people-details',
  components: { GridLayout, PeopleInfoTabs, BasicInfo },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      show: false,
      layout: [
        { name: 'left', colSpan: 6, style: { padding: '20px' } },
        { name: 'right', colSpan: 18 },
      ],
      details: {},
    };
  },
  created() {
    this.getDataAsync();
  },
  methods: {
    async getDataAsync() {
      const params = { people_id: this.data.people_id };
      this.details = await handleCommonRes(peopleDetails(params));
      this.show = true;
    },
  },
};
</script>

<style lang="less"></style>
